<template>
  <footer id="footer_main">
    <div class="footer_box1 container hidden-xs">
      <div class="left">
        <div class="info_row">
          <span class="info_label">微信公众号：</span>
          <span class="info_value">阳光以西</span>
        </div>
        <div class="info_row margin_top">
          <span class="info_label">微信：</span>
          <span class="info_value">F71767</span>
        </div>
        <div class="info_row margin_top">
          <span class="info_label">QQ：</span>
          <span class="info_value">211171767</span>
        </div>
        <div class="info_row margin_top">
          <span class="info_label">邮箱：</span>
          <span class="info_value">xiaofan99818@163.com</span>
        </div>
      </div>
      <div class="right">
        <span class="title">{{ userInfo?.name }}の小站</span>
        <span class="text margin_top"
          >{{ userInfo?.name }}の小站
          站点旨在记录自己工作、学习和生活点滴的同时，跟广大网友分享优质的互联网资源、软件工具以及实用的互联网小技巧。</span
        >
        <span class="text margin_top"
          >本站所有互联网资源均搜集与互联网，仅供学习和参考。</span
        >
        <span class="text margin_top"
          >博客文章内容版权归作者及来源网站所有，原创内容不得转载！</span
        >
      </div>
    </div>
    <div class="footer_box2 visible-xs">
      <div class="top">
        <div class="info_row">
          <span class="info_label">微信公众号：</span>
          <span class="info_value">阳光以西</span>
        </div>
        <div class="info_row margin_top">
          <span class="info_label">微信：</span>
          <span class="info_value">F71767</span>
        </div>
        <div class="info_row margin_top">
          <span class="info_label">QQ：</span>
          <span class="info_value">211171767</span>
        </div>
        <div class="info_row margin_top">
          <span class="info_label">邮箱：</span>
          <span class="info_value">xiaofan99818@163.com</span>
        </div>
      </div>
      <div class="bottom">
        <span class="title">{{ userInfo?.name }}の小站</span>
        <span class="text margin_top"
          >{{ userInfo?.name }}の小站
          站点旨在记录自己工作、学习和生活点滴的同时，跟广大网友分享优质的互联网资源、软件工具以及实用的互联网小技巧。</span
        >
        <span class="text margin_top"
          >本站所有互联网资源均搜集与互联网，仅供学习和参考。</span
        >
        <span class="text margin_top"
          >博客文章内容版权归作者及来源网站所有，原创内容不得转载！</span
        >
      </div>
    </div>
    <div class="copyright1 hidden-xs">
      <div class="copyright_box container">
        <span class="item"> Copyright © 2023 </span>
        <span class="divider">|</span>
        <span class="item is_click" @click="goPublicNetwork">
          湘公网安备 43052220000813号
        </span>
        <span class="divider">|</span>
        <span class="item is_click" @click="goICP"> 湘ICP备 08131411号-1 </span>
      </div>
    </div>
    <div class="copyright2 visible-xs">
      <div class="copyright_box container">
        <span class="item"> Copyright © 2023 </span>
        <span class="item is_click" @click="goPublicNetwork">
          湘公网安备 43052220000813号
        </span>
        <span class="item is_click" @click="goICP"> 湘ICP备 08131411号-1 </span>
      </div>
    </div>
  </footer>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "YgFooter",
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  methods: {
    goPublicNetwork() {
      window.open(`https://www.beian.gov.cn/portal/index.do`, "_blank");
    },
    goICP() {
      window.open(`https://beian.miit.gov.cn/#/Integrated/index`, "_blank");
    },
  },
  mounted() {
    // 测试修改scss变量
    setTimeout(() => {
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--cs_color", `pink`);
    }, 2000);
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/global_variable.scss";
#footer_main {
  min-width: 320px;
  width: 100%;
  background-color: #333;
  background-color: $cs_color;
  & > .footer_box1 {
    display: flex;
    flex-direction: row;
    padding: 50px 0 36px !important;
    & > .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 400px;
      max-width: 400px;
      padding-right: 60px;
      & > .info_row {
        display: flex;
        flex-direction: row;
        &.margin_top {
          margin-top: 12px;
        }
        & > .info_label {
          text-align: end;
          width: 100px;
          font-size: 14px;
          font-weight: 500;
          color: #fff;
          line-height: 22px;
          user-select: none;
          cursor: default;
        }
        & > .info_value {
          flex: 1;
          font-size: 14px;
          font-weight: 400;
          color: #b7b7b7;
          line-height: 22px;
          word-break: break-all;
        }
      }
    }
    & > .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      & > .title {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        line-height: 26px;
      }
      & > .text {
        font-size: 14px;
        font-weight: 400;
        color: #b7b7b7;
        line-height: 22px;
      }
      & > .margin_top {
        margin-top: 12px;
      }
    }
  }
  & > .footer_box2 {
    display: flex;
    flex-direction: column;
    padding: 24px 16px !important;
    & > .top {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      & > .info_row {
        display: flex;
        flex-direction: row;
        padding-right: 24px;
        & > .info_label {
          text-align: end;
          width: max-content;
          font-size: 14px;
          font-weight: 500;
          color: #fff;
          line-height: 32px;
          user-select: none;
          cursor: default;
        }
        & > .info_value {
          flex: 1;
          font-size: 14px;
          font-weight: 400;
          color: #b7b7b7;
          line-height: 32px;
          word-break: break-all;
        }
      }
    }
    & > .bottom {
      display: flex;
      flex-direction: column;
      margin-top: 24px;
      & > .title {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        line-height: 26px;
      }
      & > .text {
        font-size: 14px;
        font-weight: 400;
        color: #b7b7b7;
        line-height: 22px;
      }
      & > .margin_top {
        margin-top: 12px;
      }
    }
  }
  & > .copyright1 {
    background-color: #222;
    & > .copyright_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 12px 0;
      & > .item {
        font-size: 12px;
        font-weight: 400;
        color: #999;
        line-height: 20px;
        &.is_click {
          cursor: pointer;
        }
        &:hover {
          color: #fff;
        }
      }
      & > .divider {
        margin: 0 6px;
        font-size: 12px;
        font-weight: 400;
        color: #b7b7b7;
        line-height: 20px;
      }
    }
  }
  & > .copyright2 {
    background-color: #222;
    & > .copyright_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 0;
      & > .item {
        font-size: 12px;
        font-weight: 400;
        color: #b7b7b7;
        line-height: 28px;
        &.is_click {
          cursor: pointer;
        }
        &:active {
          color: #fff;
        }
      }
    }
  }
}
</style>
